<template>
    <!-- 表单提交 -->
    <view class="xinguan-view">
        <view class="xinguan-flex">
            <text>姓名</text>
            <input placeholder="请输入姓名" placeholder-class="input-style" v-model="penging_data.name" />
        </view>
        <view class="xinguan-flex">
            <text>身份证</text>
            <input placeholder="请输入身份证" placeholder-class="input-style" v-model="penging_data.id_card" />
        </view>
        <view class="xinguan-flex">
            <text>手机号</text>
            <input placeholder="请输入手机号" type="number" placeholder-class="input-style" v-model="penging_data.phone" />
        </view>
        <view class="xinguan-flex">
            <text>现居地址</text>
            <picker mode="time" class="flex-left" @change="changeRegion">
                <view>
                    <text>{{penging_data.address==""?"请选择现居地址":penging_data.address}}</text>
                    <image src="/static/other/gengduo.svg" mode="scaleToFill" />
                </view>
            </picker>
        </view>
        <view class="xinguan-flex">
            <text>现居详细地址</text>
            <input placeholder="请输入现居详细地址" placeholder-class="input-style" v-model="penging_data.de_address" />
        </view>
        <view class="xinguan-flex">
            <text>疫苗人群分类</text>
            <picker mode="selector" class="flex-left" :range="selector_data" @change="changeSelector">
                <view>
                    <text>{{penging_data.crow_sort==''?'请选择疫苗人群分类':penging_data.crow_sort}}</text>
                    <image src="/static/other/gengduo.svg" mode="scaleToFill" />
                </view>
            </picker>
        </view>
    </view>

    <!-- 预约时间 -->

    <!-- 医院地址 -->
    <view class="reserve-address">
        <text class="reserve-name">{{ timeData.data.Hospital }}</text>
        <text class="reserve-road">{{ timeData.data.address }}</text>
        <view class="reserve-title">
            <text v-for="(item,index) in timeData.data.company" :key="index">{{ item }}</text>
        </view>
    </view>

    <!-- 星期 -->
    <view class="Week" v-for="(item,index) in timeData.data.week" :key="index">
        <view class="Week-flex" @click="ChooseWeek(item.date)">
            <view class="Week-style Week-sup" :class="penging_data.date==''?'':'checkstyle'">
                <text>{{ item.day }}</text>
                <text>{{ item.date }}</text>
                <text>{{ item.Have }}</text>
            </view>
        </view>
    </view>
    <!-- 时段 -->
    <view class="period-view" v-for="(item,index) in timeData.data.lasting" :key="index">
        <text class="period-title">{{ item.period }}</text>
        <view class="Week-flex">
          <block v-for="(item_a,index_a) in item.time" :key="index_a">
            <view class="Week-style Week-Down" :class="index+'-'+index_a==timeIndex?'checkstyle':''"
            @click="ChooseTime(index+'-'+index_a,item.period,item_a.start_time,item_a.end_time,item_a.when)">
                <text>{{ item_a.start_time }}-{{ item_a.end_time }}</text>
                <text>剩余{{ item_a.over }}</text>
            </view>
          </block>
        </view>
    </view>
    <!-- 底部按钮 -->
    <view style="height: 300px;"></view>
    <view class="submit">
        <text @click="Cancle">取消</text>
        <text @click="Submit">提交预约</text>
    </view>
</template>
<script lang="ts" setup>
import type { Newapptime } from '@/public/decl-type';
import { RequestApi } from '@/public/request';
import { ref, toRefs } from 'vue';
import { onMounted } from 'vue';
import { reactive } from 'vue';


//请求本页面数据
//响应式对象
let timeData=reactive<{data:Newapptime}>({
  data:{
    Hospital:"",
    address:"",
    company:[],
    lasting:[],
    week:[]
  }
})


onMounted(async()=>{
  const res:any=await RequestApi.NewappTime()
  console.log(res)
  timeData.data=res.data.data[0]
})

//待提交数据
let SubmitData=reactive({
  penging_data:{
    name:"",
    id_card:"",
    phone:"",
    address:"",
    de_address:"",
    crow_sort:"",
    date:"",
    period:"",
    reserve_time:"",
    when:0
  }
})


//toRefs解构后任然为响应式：（数据变了，页面就变）
let {penging_data}=toRefs(SubmitData)

//选择省市
function changeRegion(event:any) {
  let address=''
  console.log(event.detail.value)
  SubmitData.penging_data.address=event.detail.value
 
}

//选择疫苗人群分类
let selector_data=ref(['医疗卫生人员','卫生系统内工作的其他人员','因公出国人员',
'对外劳务派遣人员','留学生','因私出国人员','海关边检人员','公安系统,消防人员',
'党政机关,事业单位人员','社区工作者','教育工作者','小学和中学学生','其他人员'
])

function changeSelector(event:any) {
  SubmitData.penging_data.crow_sort=selector_data.value[event.detail.value]
  console.log("测试选择器selector:"+event.detail.value)
}
//选择星期
function ChooseWeek(date:string) {
  console.log("选择的日期："+date)
  SubmitData.penging_data.date=date;
}
//选择时段
let timeIndex=ref('1')
function ChooseTime(index:string,period:string,start_time:string,end_time:string,when:number) {
  timeIndex.value=index
  SubmitData.penging_data.period=period
  console.log('period:'+period)
  SubmitData.penging_data.reserve_time=start_time+'-'+end_time
  SubmitData.penging_data.when=when
  console.log('----'+index+'   when:'+when)
}

function Cancle() {
  uni.navigateBack({delta:1})
}

async function Submit() {
  uni.showLoading({title:'提交中',mask:true})
  console.log("----------------->"+SubmitData.penging_data)
  const res:any=await RequestApi.RescoVid(SubmitData.penging_data) as {statusCode:200}
  console.log(res)
  if(res.statusCode==200){
    uni.hideLoading()
    uni.navigateTo({ url: '/pages/my-service/xinguan/index' })//my-service/xinguan/index
  }
}
</script>
<style>
/* 表单提交 */
@import url('../../common-style/form.css');
page{
  background-color: #f7f7f7;
}
/* 预约地址 */
.reserve-address{
  background-color: #ffffff;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}
.reserve-address text{
  display: block;
}
.reserve-name{
  font-weight: bold;
}
.reserve-road{
  padding: 20rpx 0;
}
.reserve-title{
  display: flex;
  align-items: center;
}
.reserve-title text{
  background-color: #f7f7f7;
  padding: 5rpx 20rpx;
  font-size: 25rpx;
  margin-right: 10rpx;
}
.Week{
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 20rpx;
  display: flex;
  align-items: center;
}
.Week-flex{
  display: flex;
}
.Week-style{
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 10rpx;
  margin-right: 20rpx;
}
.Week-style text{
  padding: 3rpx;
}
.Week-sup{
  width: 150rpx;
}
.period-view{
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 20rpx;
}
.period-title{
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}
.Week-Down{
  width: 200rpx;
}
/* 选中加上样式 */
.checkstyle{
  background-color: #2c76ef !important;
  color: #ffffff !important;
}
</style>